<template>
  <div>
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      @change="$emit('change',content)"
    >
    </quill-editor>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {

  data () {
    return {
      content: null,
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote'], // 引用，
            ['code-block', 'image', 'link'] // 代码块,上传图片、上传视频
          ]
        }
      }
    }
  },
  components: {
    quillEditor
  },

  methods: {
    onEditorBlur (e) {

    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ql-editor {
  height: 200px;
}

/deep/ .ql-toolbar.ql-snow {
  padding: 0 8px;
}
</style>
